@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  margin: 0;
  padding: 0;
  margin-top: 0px;
  background-color: var(--risu-theme-bgcolor);
  overflow-y: hidden;
  overflow-x: hidden;
}

:root{
  --FontColorStandard: #fafafa;
  --FontColorBold : ##e5e5e5;
  --FontColorItalic : #8C8D93;
  --FontColorItalicBold : #8C8D93;
  --FontColorQuote1 : #8C8D93;
  --FontColorQuote2 : #8C8D93;
  --risu-animation-speed: 0.2s;
  --risu-theme-bgcolor: #282a36;
  --risu-theme-darkbg:  #21222c;
  --risu-theme-borderc: #6272a4;
  --risu-theme-selected: #44475a;
  --risu-theme-draculared: #ff5555;
  --risu-theme-textcolor: #f5f5f5;
  --risu-theme-textcolor2: #64748b;
  --risu-theme-darkborderc: #4b5563;
  --risu-theme-darkbutton: #374151;
  --risu-height-size: 100%;
  --risu-font-family: Arial, sans-serif, serif;

    --risu-theme-neutral-50: #f9fafb;
    --risu-theme-neutral-100: #f3f4f6;
    --risu-theme-neutral-200: #e5e7eb;
    --risu-theme-neutral-300: #d1d5db;
    --risu-theme-neutral-400: #9ca3af;
    --risu-theme-neutral-500: #6b7280;
    --risu-theme-neutral-600: #4b5563;
    --risu-theme-neutral-700: #374151; 
    --risu-theme-neutral-800: #1f2937;
    --risu-theme-neutral-900: #111827;
  
    --risu-theme-primary-50: #eff6ff;
    --risu-theme-primary-100: #dbeafe;
    --risu-theme-primary-200: #bfdbfe;
    --risu-theme-primary-300: #93c5fd;
    --risu-theme-primary-400: #60a5fa;
    --risu-theme-primary-500: #3b82f6;
    --risu-theme-primary-600: #2563eb;
    --risu-theme-primary-700: #1d4ed8;
    --risu-theme-primary-800: #1e40af;
    --risu-theme-primary-900: #1e3a8a;
  
    --risu-theme-secondary-50: #f5f3ff;
    --risu-theme-secondary-100: #ede9fe;
    --risu-theme-secondary-200: #ddd6fe;
    --risu-theme-secondary-300: #c4b5fd;
    --risu-theme-secondary-400: #a78bfa;
    --risu-theme-secondary-500: #8b5cf6;
    --risu-theme-secondary-600: #7c3aed;
    --risu-theme-secondary-700: #6d28d9;
    --risu-theme-secondary-800: #5b21b6;
    --risu-theme-secondary-900: #4c1d95;

    --risu-theme-danger-50: #fef2f2;
    --risu-theme-danger-100: #fee2e2;
    --risu-theme-danger-200: #fecaca;
    --risu-theme-danger-300: #fca5a5;
    --risu-theme-danger-400: #f87171;
    --risu-theme-danger-500: #ef4444;
    --risu-theme-danger-600: #dc2626;
    --risu-theme-danger-700: #b91c1c;
    --risu-theme-danger-800: #991b1b;
    --risu-theme-danger-900: #7f1d1d;
  
    --risu-theme-success-50: #f0fdf4;
    --risu-theme-success-100: #dcfce7;
    --risu-theme-success-200: #bbf7d0;
    --risu-theme-success-300: #86efac;
    --risu-theme-success-400: #4ade80;
    --risu-theme-success-500: #22c55e;
    --risu-theme-success-600: #16a34a;
    --risu-theme-success-700: #15803d;
    --risu-theme-success-800: #166534;
    --risu-theme-success-900: #14532d;
}

.x-risu-language-json{
  overflow-x: hidden;
  white-space: pre-wrap;

}

html, body{
  height: var(--risu-height-size);
}

.chattext p{
  color: var(--FontColorStandard);
}

.chattext2 pre{
  background-color: var(--risu-theme-bgcolor);
  padding: 0.5rem;
  overflow-x: auto;
}

.chattext em{
  color: var(--FontColorItalic);
}

.chattext strong{
  color: var(--FontColorBold);
}

.chattext strong em{
  color: var(--FontColorItalicBold);
}

.chattext em strong{
  color: var(--FontColorItalicBold);
}

.chattext x-em{
  color: var(--FontColorItalicBold);
  font-style: italic;
  font-weight: bold;
}

.chattext mark[risu-mark=quote1]{
  background-color: transparent;
  color: var(--FontColorQuote1);
}

.chattext mark[risu-mark=quote2]{
  background-color: transparent;
  color: var(--FontColorQuote2);
}

.strokeme {
  color: #000;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.5); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(85, 85, 85, 0.5); 
}

.n-scroll::-webkit-scrollbar-thumb {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s linear;
}

.n-scroll:hover::-webkit-scrollbar-thumb {
  visibility: visible;
  opacity: 1;
}

.n-scroll:focus::-webkit-scrollbar-thumb {
  visibility: visible;
  opacity: 1;
}

*{
  font-family: var(--risu-font-family);
}

.chattext p:first-child{
  margin-top: 0.3rem;
}

.items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#app{
  width: 100%;
  height: 100%;
}

.bgc{
  border-top: 1px solid rgba(98, 114, 164, 0.7);
}

.text-bordered{
  -webkit-text-stroke: 1px #000;
}

.x-risu-risu-file{
  padding: 1rem;
  border: 1px solid var(--risu-theme-selected);
  border-radius: 0.5rem;
  color: var(--FontColorStandard);
  min-width: 0;
  max-width: 20rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x-risu-button-default{
  @apply border text-textcolor rounded-md shadow-sm focus:outline-none focus:ring-2 transition-colors duration-200 border-darkborderc px-4 py-2 bg-darkbutton hover:bg-borderc focus:ring-borderc
}

.loadmove {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  border: 0.4rem solid rgba(0,0,0,0);
  width: 1rem;
  height: 1rem;
  border-top: 0.4rem solid var(--risu-theme-borderc);
  border-left: 0.4rem solid var(--risu-theme-borderc);
  /* transition colors */
  transition: border-color 0.5s;
}

.x-risu-risu-comment{
  @apply border border-darkborderc bg-darkbg text-textcolor rounded-md shadow-sm focus:outline-none transition-colors duration-200 px-4 py-2 min-w-0
}


::highlight(cbsnest3) {
  @apply text-amber-500;
}
::highlight(cbsnest2) {
  @apply text-green-500;
}
::highlight(cbsnest1) {
  @apply text-blue-500;
}
::highlight(cbsnest0) {
  @apply text-purple-500;
}
::highlight(cbsnest4) {
  @apply text-pink-500;
}
::highlight(cbsdisplay) {
  @apply text-cyan-500;
}
::highlight(comment) {
  color: var(--risu-theme-textcolor2);
}

::highlight(decorator) {
  color: var(--risu-theme-draculared);
}
::highlight(deprecated) {
  color: var(--risu-theme-textcolor2);
  text-decoration: line-through;
}

.prose pre {
  background-color: var(--tw-prose-pre-bg);
  color: var(--tw-prose-pre-code);
}

.prose :where(pre code) * {
  font-family: inherit;
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
  content: "";
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
  content: "";
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(pre code) {
  background-color: var(--tw-prose-pre-bg);
  border-radius: 0.25rem;
  color: var(--tw-prose-pre-code);
  padding: 0.125rem 0.25rem;
}

.x-risu-risu-inlay-image{
  @apply w-full flex justify-center
}

.x-risu-risu-inlay-image img{
  @apply rounded-lg focus:outline-none max-w-80 w-full
}

.x-risu-risu-inlay-image video{
  @apply rounded-lg focus:outline-none max-w-80 w-full
}

.x-risu-risu-inlay-image audio{
  @apply rounded-lg focus:outline-none max-w-80 w-full
}

.x-risu-risu-error {
  @apply border-2 border-red-700 bg-red-500 text-white rounded-md shadow-sm focus:outline-none transition-colors duration-200 px-4 py-2 min-w-0 break-words
}

.x-risu-risu-error h1 {
  @apply text-xl mb-2
}

.z-100{
  z-index: 100;
}

.saving-animation {
  animation: saving-anime 1s infinite;
  background-size: 200% auto;
}

@keyframes saving-anime {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}

.flexium{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.chat-width{
  max-width: calc(100% - 0.5rem);
  word-break: normal;
  overflow-wrap: anywhere;
}

.chat-message-container .dyna-icon{
  display: none;
}

.chat-message-container:first-of-type .dyna-icon{
  display: block;
}

.x-risu-tool-call{
  @apply border border-darkborderc bg-darkbg text-textcolor rounded-md shadow-sm focus:outline-none transition-colors duration-200 px-4 py-2 min-w-0
}

.root-loaded-image{
  /* This class is used to indicate that the image has been with root-loaded method */
  /* We need to style it to centered and pretty */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 1rem);
  max-width: 20rem;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(137, 137, 137, 0.1);  
}

.root-loaded-image-dynamic{
  max-height: 14rem;
  transition: max-height 0.5s ease;
  object-fit: cover;
  object-position: top;
}

.root-loaded-image-dynamic:hover{
  max-height: 30rem;
}